<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div><input type="checkbox" v-model="isAllCheck"/>全选</div>
        <div v-for="item in list2"><input type="checkbox" v-model="item.checked">{{item}}</div>
    </div>    
</body>
<script src="./vue.js"></script>
<script>
    const{createApp,ref, reactive,computed}=Vue;
    createApp({
        setup(){
            let list=ref([{
                name:"西红柿",
                price:2,
                num:1,
                checked:false
            },{
                name:"土豆",
                price:3,
                num:2,
                checked:false 
            },
           { 
                name:"辣椒",
                price:1.5,
                num:1,
                checked:false
            }
        ])
        let list2 = computed(() => {
					return list.value.map(v => {
						v.total = v.price * v.num 
						return v
                       
					})
				})
        const isAllCheck = computed({	
					get(){	
							return list2.value.every(v=>v.checked)
					},
					set(val){
						if(val){
							list2.value.forEach(v=>{
								v.checked = true
							})
						}else{
							list2.value.forEach(v=>{
								v.checked = false
							})
						}
					}
				})
            return{
                list,
                list2,
                isAllCheck,
               
            }
        }
    }).mount("#app")
</script>
</html>